<template>
<div class="password-progress">
    <Form-item :label="passwordLabel" :prop="ruleName">
        <Poptip trigger="focus" placement="right" width="200">
            <Input type="password" v-model.trim="psw" :minlength="6" :maxlength="16" placeholder="6 - 16位密码，区分大小写" @on-change="passwordChange" size="large" v-if="isLarge"></Input>

            <Input type="password" v-model.trim="psw" :minlength="6" :maxlength="16" placeholder="6 - 16位密码，区分大小写" @on-change="passwordChange" v-else></Input>
            
            <div class="password" slot="content">
                <Progress :percent="passwordLevelSet[passwordLevel].percent" :status="passwordLevelSet[passwordLevel].type">
                    <slot>强度：{{passwordLevelSet[passwordLevel].text}}</slot>
                </Progress>
            </div>
        </Poptip>
    </Form-item>
</div>
</template>
<script>
/**
   *
   * 密码框强度提示组件
   * created by fida
   * 2017-12-25
   *
   * 说明：
   * 本组件主要作密码强度提示作用，父组件需传入password的值
   *  
   **/
    export default {
        props: {
            password: {//密码值
                type: String,
                required: true
            },
            ruleName: {//表单验证对应的prop值
                type: String,
                default: 'password'
            },
            passwordLabel: {
                type: String,
                default: '重设登录密码'
            },
            isLarge: {
                type: Boolean,
                default: false
            }
        },
        data(){            
            return{
                psw: '',//当前页面的密码输入框的值
                passwordLevelSet:{//密码提示相关设置
                    'low':{
                        text: '太短',
                        type: 'wrong',
                        percent: 33
                    },
                    'middle':{
                        text: '中等',
                        type: 'success',
                        percent: 66
                    },
                    'high':{
                        text: '安全',
                        type: 'normal',
                        percent: 100
                    },
                },
                passwordLevel: 'low',//密码等级
            }
        },
        watch: {
            'password': 'setPsw'
        },
        methods:{
            passwordChange() {
                this.$emit('passwordChange',this.psw);//本组件密码修改时反馈给父组件

                //设置密码等级
                let v = this.psw;
                if(this.$utils.RegexUtils('HIGHPWD',v)) this.passwordLevel = 'high';
                else if(this.$utils.RegexUtils('LOWPWD',v)) this.passwordLevel = 'low';
                else if(this.$utils.RegexUtils('ISPWD',v)) this.passwordLevel = 'middle';
            },
            setPsw() {
                this.psw = this.password;//获取父组件的密码值
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .password-progress{
        .ivu-progress-bg{
            height: 6px !important;
        }
        .ivu-progress-show-info .ivu-progress-outer{
            margin-top: 20px !important;
        }
        .ivu-progress-text{
            position: absolute;
            left: 0;
            margin-left: 0;
            color: @select-color;
        }
        .ivu-progress-wrong .ivu-progress-text{
            color: @error-color;
        }
        .ivu-progress-success .ivu-progress-bg{
            background-color: @warning-color;
        }
        .ivu-progress-success .ivu-progress-text{
            color: @warning-color;
        }
    }
</style>